<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">List District</decorator:content>
	<decorator:content placeholder="head">
		<link rel="stylesheet" href="css/jq.css" type="text/css"media="print, projection, screen" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="print, projection, screen" />
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"
			media="print, projection, screen" />
		<style type="text/css">
			.hidden {
				visibility: hidden;
			}

			.row-highlight {
				background-color: Yellow;
			}

			.row-click {
				background-color: gray;
				color: white;
			}
  			.highlight { background-color: red; }
  
		</style>
		<link rel="stylesheet" href="css/jq.css" type="text/css"
			media="print, projection, screen" />
		<link rel="stylesheet" href="css/style-tablesort.css" type="text/css"
			media="print, projection, screen" />
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
		<script type="text/javascript" src="js/docs.js"></script>

		<script type="text/javascript"
			src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
			rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css">
		<link rel="stylesheet"
			href="http://www.script-tutorials.com/demos/87/css/style.css"
			type="text/css" media="screen">
		<script type="text/javascript">

			function updateDistrict(districtID) {
				//		alert("fdsf");		
				bootbox.dialog({
					message : "Do you want to update this Trust District?",
					buttons : {
						upadate : {
							label : "Update",
							className : "btn-upadte",
							callback : function() {
								window.location
									.replace("AmendTrustDistrict.jsp?districtID="+ districtID);
									/*
										+"&districtName="+districtName
										+"&description="+description
										+"&regionName="+regionName
										+"&active="+active);
									*/
								}
						},
						cancel : {
							label : "Cancel",
							className : "btn-cancel",
						}
					}
				});
			}
			$(document).ready(function() {
				$("a").click(function() {
					var filter = $(this).attr("id");
					var check = $("#checkActive").attr("checked");
					check = (check == true) ? 1 : 0;
					$.ajax({
						url : "GetListTrustDistrict?filter=" + filter
								+ "&checked=" + check,
						type : "POST",
						success : function(data) {
							load(data);
						},
						error : function(data) {
							//alert("fail a");
						}
					});
				});
				$("#checkActive").click(function() {
					var check = $("#checkActive").attr("checked");
					if (check) {
						$.ajax({
							url : "GetListTrustDistrict?checked=1",
							type : "POST",
							success : function(data) {
								load(data);
							},
							error : function(data) {
								alert("fail chk");
							}
						});
					} else {
						$.ajax({
							url : "GetListTrustDistrict?checked=0",
							type : "POST",
							success : function(data) {
								load(data);
							},
							error : function(data) {
								alert("fail notchk");
							}
						});
					}
				});

			});
			$(window).load(function() {
				$.ajax({
					url : "GetListTrustDistrict?checked=0",
					type : "POST",
					success : function(data) {
						load(data);
					},
					error : function(data) {
						alert("Loading data fails");
					}
				});
			});
			function load(data) {
				var data1 = JSON.parse(data);
				var length = data1.TrustDistricts.length;
				var result = "<table cellspacing=1 class=\"tablesorter\" id=\"table\">";
				result += "<thead>";
				result += "<tr>";
				result += "<th>Trust District Name</th>";
				result += "<th>Description</th>";
				result += "<th>Region Name</th>";
				result += "<th>Is Active?</th>";
				result += "</tr>";
				result += "</thead>";
				result += "<tbody>";
				//	    $("#datatable").empty();
				for (var i = 0; i < length; i++) {
					districtID =data1.TrustDistricts[i].TrustDistrictId;
					districtName =data1.TrustDistricts[i].Name;
					description = data1.TrustDistricts[i].Description;
					regionName = data1.TrustDistricts[i].RegionName;	
					active = data1.TrustDistricts[i].IsActive;
					
					result += "<tr ondblclick='updateDistrict("+districtID+")'>";
					/*+"onMouseOver=\"this.className='highlight'\" onMouseOut=\"this.className='normal'\" >";*/
					result += "<td id="+ districtID +">";
					result += districtName + "</td>";
					result += "<td>" + description + "</td>";
					result += "<td>" + regionName + "</td>";
					if (active) {
						result += "<td>Yes</td>";
					} else {
						result += "<td>No</td>";
					}
					result += "</tr>";
				}
				result += "</tbody>";
				result += "</table>";
		
				result += "<div id=pager class=pager style=right:5px;float:right;>";
				result += "<form>";
				result += "<img src=img/first.png class=first />";
				result += "<img src=img/prev.png class=prev />";
				result += " <input type=text class=pagedisplay size=5 style=\"width:63px; height:20px;\"/>";
				result += "<img src=img/next.png class=next />";
				result += "<img src=img/last.png class=last />";
				result += "<select class=pagesize style=visibility:hidden;>";
				result += "<option selected=selected  value=15></option>";
				result += "</select>";
				result += "</form>";
				result += "</div>";
				$("#datatable").empty();	 
				$("#datatable").append(result);
				$("#table").tablesorter({
					widthFixed : true,
					widgets : [ 'zebra' ]
				}).tablesorterPager({
					container : $("#pager")
				});
				$("#pager").css("position", "static");
			}
		
			function openCreate() {
				window.location.replace("AddTrustDistrict.jsp");
			}
		</script>		
	</decorator:content>
	<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
		<div id="manager_nav">
			<ul>
				<li><a href="#" id="all">All</a></li>
				<li>|</li>
				<li><a href="#" id="digital">0 - 9</a></li>
				<li>|</li>
				<li><a href="#" id="ae">A B C D E</a></li>
				<li>|</li>
				<li><a href="#" id="fj">F G H I J</a></li>
				<li>|</li>
				<li><a href="#" id="kn">K L M N</a></li>
				<li>|</li>
				<li><a href="#" id="or">O P Q R</a></li>
				<li>|</li>
				<li><a href="#" id="sv">S T U V</a></li>
				<li>|</li>
				<li><a href="#" id="wz">W X Y Z</a></li>
			</ul>
		</div>
		<div id="manager_action">
			<a href="#" style="text-decoration: none"> 
				<input type="button"class="btn-default" value="Create" onclick="openCreate();" />
			</a>&nbsp; 
			<input type="checkbox" id="checkActive">
				<span style="color: gray; font-weight: bold"> Include in-active</span>
		</div>
		<br>
		<div id="datatable"></div>
	</decorator:content>
</decorator:decorate>